<template>
  <div class="container">
    <!-- <div class="title">{{tltleText}}</div> -->
    <keep-alive>
      <router-view />
    </keep-alive>
    <div class="footer">
      <div class="item">
        <router-link to="/">
          <div class="tabbar-item" :class="path==='/' ? 'active' : ''">
            <img src="../assets/tabbar/me.png" v-show="path!=='/' ? 'active' : ''" alt="#" />
            <img
              src="../assets/tabbar/me_active.png"
              v-show="path==='/' ? 'active' : ''"
              alt="#"
            />
            <p>我的</p>
          </div>
        </router-link>
      </div>
      <div class="item">
        <router-link to="/goods">
          <div class="tabbar-item" :class="path==='/goods' ? 'active' : ''">
            <img src="../assets/tabbar/goods.png" v-if="path!=='/goods' ? 'active' : ''" alt />
            <img
              src="../assets/tabbar/goods_active.png"
              v-if="path==='/goods' ? 'active' : ''"
              alt
            />
            <p>货源</p>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import me from "./component/Me";
import goods from "./component/Goods";
import { mapGetters } from "vuex";
export default {
  components: {
    me,
    goods
  },
  computed: {
    ...mapGetters(["tltleText"])
  },
  data() {
    return {
      path: "/"
    };
  },
  created() {
    this.path = this.$route.path;
  },
  watch: {
    $route(to, from) {
      this.path = to.path;
    }
  },
  methods: {}
};
</script>

<style lang='scss' scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  > .footer {
    width: 100%;
    position: fixed;
    display: flex;
    justify-content: space-around;
    align-content: center;
    left: 0;
    bottom: 0;
    padding: 15px 0 16px 0;
    border-top: 1px solid #f2f2f2;
    background-color: #fff;
    z-index: 999;
    .tabbar-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 20px;
      &.active {
        color: rgba(254, 96, 24, 1);
      }
      > img {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
